<template>
  <!-- 班级管理添加 -->
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <em class="el-icon-lx-calendar"></em>管理员
        </el-breadcrumb-item>
        <el-breadcrumb-item>修改密码</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
        <div class="back"><el-button type="primary" @click="back">返回首页</el-button></div>
      <div class="form-box">
        <div class="form-position">
          <el-form :rules="rules" ref="form" :model="form" label-width="80px">
            <el-form-item label="旧密码" prop="oldpwd">
              <el-input style="width: 400px" v-model="form.oldpwd" show-password> </el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newpwd">
              <el-input style="width: 400px" v-model="form.newpwd" show-password> </el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmpwd">
              <el-input style="width: 400px" v-model="form.confirmpwd" show-password></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('form')">确认修改</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updatepassword } from "../../api/index";
export default {
  name: "updatepassword",
  data() {
    var validateOldPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error("密码长度要6-16位"));
      } else {
        callback();
      }
    };
    var validateNewPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error("密码长度要6-16位"));
      } else {
        if (this.form.confirmpwd !== "") {
          this.$refs.form.validateField("confirmpwd");
        }
        callback();
      }
    };
    var validateConfirmPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error("密码长度要6-16位"));
      } else if (value !== this.form.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {
        username: '',
        oldpwd: "",
        newpwd: "",
        confirmpwd: "",
      },
      rules: {
        oldpwd: [
          { required: true, validator: validateOldPwd, trigger: "blur" },
        ],
        newpwd: [
          { required: true, validator: validateNewPwd, trigger: "blur" },
        ],
        confirmpwd: [
          { required: true, validator: validateConfirmPwd, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    updatepwd(callback) {
        this.form.username = localStorage.getItem("ms_username")
      updatepassword(this.form).then((res) => {
        console.log(res);
        if (res == 1) {
          this.$message.success("修改成功！");
          callback(true)
        } else if(res == 0){
            this.$message.error("修改失败！");
            callback(false)
        } else if(res == "密码错误") {
            this.$message.error("密码错误！")
            callback(false)
        }
      });
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.updatepwd((state) => {
              console.log(state);
            if (state) {
                this.$refs[formName].resetFields();
            }
          });
        } else {
          this.$message.error("请输入正确数据！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    back() {
        this.$router.push("/dashboard")
    }
  },
};
</script>

<style scoped>
.back{
    width: 100wh;
}
.form-box {
  height: 250px;
}
.form-position {
  width: 500px;
  position: absolute;
  left: 50%;
  transform: translateX(-60%);
}
</style>